// 我的强项
<template>
    <info-block :editable="false">
        <div slot="title">我的强项</div>
        <div slot="read-box">
            <div v-for="(item, index) in myGoodness" :key="`my-goodness-${index}`" class="my-goodness-item">
                {{ item }} <span @click="doDelete(item, index)">X</span>
            </div>
            <Input v-model="searchKeywords" placeholder="输入关键字" style="margin: 10px 0" @on-change="keywordChange"/>
            <div class="my-goodness-selection" v-for="(item, index) in finalSelection" :key="`my-goodness-selection-${index}`" @click="doSelect(item, index)">
                {{ item }}
            </div>
            <div style="margin: 20px 0; text-align: center">
                <Button type="primary" v-if="changed()" disabled>
                    保存
                </Button>
                <Button type="primary" v-else @click="save">
                    保存
                </Button>
            </div>
        </div>
    </info-block>
</template>

<script lang='ts'>
import { Goodness } from "./Index";
export default Goodness;
</script>

<style lang='scss' scoped>
@import './Index.scss';
</style>